import React, { Component } from 'react';


export default class Home extends Component {   //一个类相当于一个组件
   
   constructor(props){ //构选函数，所有组件都有，使用的时候需要先继承父类的super  

      super(props);

      //dom的值是不会因为点击事件而发生变化，这是react规定的，需要使用state做绑定 
      this.state={
        age:props.initialAge,
        status:0
      }
      setTimeout(()=>{

      this.setState({

        status:this.state.status+1

      });

      },2000)

   }




  
  onMakeCount()
  {
    //this.age+=3;
    this.setState({

       age:this.state.age+3

    });  //绑定数据
    //console.log(this); 

  }

  render() {
    return (
      <div className="container">  
        <div className="row">
            <div className="col-xs-1 col-xs-offset-11">
                   <h1>Home</h1>
                   <h2>This is your name {this.props.name}.your age is {this.state.age}       {this.state.status}</h2>  
                   <button onClick={()=>{this.onMakeCount()}} className="btn btn-primary">click me</button>
                   <ul>
                      {this.props.user.hobbies.map((hobby,i)=><li key={i}>{hobby}</li>)}
                        {this.props.children}
                   </ul>
            </div>
         </div>
    
      </div>
    );
  }
}


